<template>
  <div class="questions-new-container">
    <el-form>
      <el-card>
        <p class="title">试题录入</p>
        <el-form ref="formData" :rules="rules" :model="formData">
          <el-form-item label="学科:" prop="subject">
            <el-select
              style="width: 500px"
              v-model="formData.subject"
              @change="checkgetSimple(formData.subject)"
            >
              <el-option
                v-for="item in arr"
                :key="item.id"
                :value="item.subjectName"
                :label="item.subjectName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="directory">
            <el-select style="width: 500px" v-model="formData.directory">
              <el-option
                v-for="item in arr1"
                :key="item.id"
                :value="item.directoryName"
                :label="item.directoryName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="company">
            <el-select style="width: 500px" v-model="formData.company">
              <el-option
                v-for="item in arr3"
                :key="item.id"
                :value="item.company"
                :label="item.company"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" prop="province">
            <el-select
              style="width: 250px"
              v-model="formData.province"
              @change="handleProvince"
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
            <!-- 区 -->
            <el-select
              class="filter-item"
              style="width: 250px"
              v-model="formData.city"
              filterable
            >
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select
              style="width: 500px"
              v-model="formData.direction"
              filterable
            >
              <el-option
                v-for="item in directionSelect"
                :key="item.id"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:">
            <!-- <el-input type="radio"></el-input> -->
            <el-radio-group v-model="radio" @change="select(show)">
              <el-radio :label="1" v-model="switch2">单选</el-radio
              ><el-radio :label="2">多选</el-radio
              ><el-radio :label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:">
            <!-- <el-input type="radio"></el-input> -->
            <el-radio-group v-model="radio1">
              <el-radio :label="1">简单</el-radio
              ><el-radio :label="2">一般</el-radio
              ><el-radio :label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 文章发表部分 -->
          <el-form-item label="题干:" prop="question">
            <!-- 使用全局注册的富文本编辑器插件 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="formData.question"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              style="margin: 0 53px"
            ></quill-editor>
          </el-form-item>

          <el-form-item label="选项:" v-show="show">
            <el-form v-if="radio == 2">
              <div style="margin-top: 25px">
                <el-checkbox style="margin-right: 0px">B :</el-checkbox>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input
                  v-model="formData.pic"
                  style="width: 300px"
                ></el-input>
              </div>
              <!-- 上传图片 多选框-->
              <el-upload
                class="avatar-uploader"
                style="transform: translate(45px, 0px)"
                action="#"
                :show-file-list="false"
                :http-request="upload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <span v-else class="el-icon">上传图片</span>
                <i class="el-icon-circle-close uploader-icon"></i>
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
              </el-upload>
            </el-form>
            <el-form
              v-for="item in checkboxlist"
              :key="item.id"
              v-if="radio == 2"
            >
              <div style="margin-left: 45px">
                <el-checkbox style="margin-right: 0px">B :</el-checkbox>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input style="width: 300px"></el-input>
              </div>
              <!-- 上传图片 多选框-->
              <el-upload
                class="avatar-uploader"
                style="transform: translate(45px, 0px)"
                action="#"
                :show-file-list="false"
                :http-request="upload"
              >
                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                <span class="el-icon">上传图片</span>
                <i class="el-icon-circle-close uploader-icon"></i>
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
              </el-upload>
            </el-form>
            <el-radio-group v-model="radio2" style="margin-top: 25px">
              <el-form v-if="radio == 1">
                <el-radio :label="5" style="margin-right: 1px">A :</el-radio>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input
                  v-model="formData.pic"
                  style="width: 300px"
                ></el-input>
                <!-- 上传图片 多选框-->
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="upload"
                >
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <span v-else class="el-icon">上传图片</span>
                  <i class="el-icon-circle-close uploader-icon"></i>
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
                </el-upload>
              </el-form>
              <el-form v-if="radio == 1">
                <el-radio :label="6" style="margin-right: 1px">B :</el-radio>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input style="width: 300px"></el-input>
                <!-- 上传图片 多选框-->
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="upload"
                >
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                  <span class="el-icon">上传图片</span>
                  <i class="el-icon-circle-close uploader-icon"></i>
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
                </el-upload>
              </el-form>
              <el-form v-if="radio == 1">
                <el-radio :label="7" style="margin-right: 1px">D :</el-radio>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input style="width: 300px"></el-input>
                <!-- 上传图片 多选框-->
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="upload"
                >
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                  <span class="el-icon">上传图片</span>
                  <i class="el-icon-circle-close uploader-icon"></i>
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
                </el-upload>
              </el-form>
              <el-form v-if="radio == 1">
                <el-radio :label="8" style="margin-right: 1px">C :</el-radio>
                <!-- <input
                type=""
                v-if="radio == 1 ? (type = 'radio') : (type = 'checkbox')"
              /> -->
                <el-input style="width: 300px"></el-input>
                <!-- 上传图片 多选框-->
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="upload"
                >
                  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
                  <span class="el-icon">上传图片</span>
                  <i class="el-icon-circle-close uploader-icon"></i>
                  <!-- <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
                </el-upload>
              </el-form>
              <el-button
                :disabled="radio == 1"
                @click="onAdd"
                size="small"
                type="danger"
                class="btnColor"
                >+增加选项与答案</el-button
              >
            </el-radio-group>

            <!-- <el-form>
              <el-checkbox style="margin: 25px 45px"
                >A :<el-input></el-input
              ></el-checkbox>
            </el-form>
            <el-form>
              <el-checkbox style="margin: 25px 45px"
                >C :<el-input></el-input
              ></el-checkbox>
            </el-form>
            <el-form>
              <el-checkbox style="margin: 25px 45px"
                >D :<el-input></el-input
              ></el-checkbox>
            </el-form> -->
          </el-form-item>
          <el-form-item label="解析视频:" prop="video">
            <el-input v-model="formData.video" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <!-- 使用全局注册的富文本编辑器插件 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="formData.answer"
              :options="editorOption"
              @blur="answerBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              style="margin: 0 73px"
            ></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <textarea
              v-model="formData.node"
              name=""
              id="text"
              cols="68"
              rows="5"
            ></textarea>
          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select
              filterable
              clearable
              v-model="formData.label"
              allow-create
              placeholder="请选择试题标签"
              style="width: 500px"
            ></el-select>
          </el-form-item>
          <el-form>
            <el-button @click="submit" type="primary" style="margin-left: 74px"
              >确认提交</el-button
            >
          </el-form>
        </el-form>
      </el-card>
    </el-form>
  </div>
</template>

<script>
// import { list as SubjectListList } from "@/api/hmmm/subjects";
import { list as DirectoryListSimple } from "@/api/hmmm/directorys";
import { list as CompanysList } from "@/api/hmmm/companys";
import { provinces, citys } from "@/api/hmmm/citys.js";
import { batch as addQuestion } from "@/api/hmmm/questions";
// import { direction } from "@/api/hmmm/constants.js";

// import { simple } from "@/api/hmmm/directorys";
// import { quillEditor } from "vue-quill-editor";
// import arrayToTree from "array-to-tree";
export default {
  name: "questio",
  data() {
    return {
      // arr: list.arr,
      arr: [],
      arr1: [],
      // arr1: [],
      arr3: [],
      // datas:citys.datas,
      // 多选列表
      imageUrl: "",
      checkboxlist: [1, 2, 3],
      // 对象
      formData: {
        subject: "", //学科
        directory: "", //目录
        business: "", //企业
        province: "",
        company: "",
        city: "", //城市
        direction: "", //方向
        question: "", //题干s
        answer: "", //解析
        node: "", //备注
        pic: "",
        label: "",
        video: "",
      },
      rules: {
        video: [{ required: true, message: "请输入视频地址", trigger: "blur" }],
        subject: [{ required: true, message: "请输入学科", trigger: "change" }],
        directory: [
          { required: true, message: "请输入目录", trigger: "change" },
        ],
        province: [
          { required: true, message: "请输入城市", trigger: "change" },
        ],
        company: [{ required: true, message: "请输入企业", trigger: "change" }],
        direction: [
          { required: true, message: "请输入方向", trigger: "change" },
        ],
        question: [{ required: true, message: "请输入题干", trigger: "blur" }],
        answer: [{ required: true, message: "请输入解析", trigger: "blur" }],
        // directory: [{ required: true, message: "不能为空", trigger: "blur" }],
        // business: [{ required: true, message: "不能为空", trigger: "blur" }],
        // city: [{ required: true, message: "不能为空", trigger: "blur" }],
        // direction: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      radio: 1,
      radio1: 1,
      radio2: 1,
      // 富文本编辑器样式
      content: null,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["blockquote"],
            ["code-block", "image", "link"],
          ],
        },
        placeholder: "",
      },
      show: true,
      switch2: true,
      // 市区列表
      citySelect: {
        province: [],
        cityDate: [],
      },
      // 方向列表
      directionSelect: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
    };
  },

  created() {
    // this.getSubjectList();
    this.DirectoryListSimple();
    this.getcompanysList();
    // this.getDirectoryList();
    this.getCityData();
    this.getDirction();
    // 添加题库
    // this.getQuestion()
  },
  methods: {
    upload(res) {
      console.log("上传的文件是", res.file);
      if (!res.file) {
        return;
      }
      this.showProgress = true; // 显示进度条
      // 1. 把图片上传到腾讯云COS
      // 执行上传操作
      cos.putObject(
        {
          Bucket: "wh66-1258898967" /* 存储桶 */,
          Region: "ap-beijing" /* 存储桶所在地域，必须字段 */,
          Key: res.file.name /* 文件名 */,
          StorageClass: "STANDARD", // 上传模式, 标准模式
          Body: res.file, // 上传文件对象
          onProgress: (progressData) => {
            console.log("上传的进度", JSON.stringify(progressData));
            this.percentage = progressData.percent * 100;
          },
        },
        (err, data) => {
          console.log(err);
          console.log(data);

          // 上传成功之后
          if (data.statusCode === 200) {
            // 2. 显示图片
            // this.imageUrl = `https:${data.Location}`
            // 3. 通知父组件
            this.$emit("input", `https:${data.Location}`);
          }
          this.showProgress = false;
        }
      );
    },
    // 获取学科
    // async getSubjectList() {
    //   const res = await SubjectListList();
    //   console.log(res.data, 777);
    //   // this.data = res.data.items;
    //   this.arr = res.data.items;
    //   // this.data = arrayToTree(res.data.depts, {
    //   //   parentProperty: "pid",
    //   //   customID: "id",
    //   // });
    // },
    // 获取目录
    DirectoryListSimple() {
      // const res = await DirectoryListSimple();
      // console.log(res.data, 242424);
      // // this.data = res.data.items;
      // this.arr1 = res.data;
      DirectoryListSimple().then((response) => {
        this.arr = response.data.items;
      });

      // this.data = arrayToTree(res.data.depts, {
      //   parentProperty: "pid",
      //   customID: "id",
      // });
    },
    checkgetSimple(subject) {
      DirectoryListSimple(subject).then((response) => {
        this.formData.directory = null;
        this.arr1 = response.data.items;
      });
    },
    async getcompanysList() {
      const res = await CompanysList();
      console.log(res.data, 999);
      // this.data = res.data.items;
      this.arr3 = res.data.items;
      // this.data = arrayToTree(res.data.depts, {
      //   parentProperty: "pid",
      //   customID: "id",
      // });
    },
    // async getDirectoryList() {
    //   const res = await simple();
    //   console.log(res.data, 888);
    //   // this.data = res.data.items;
    //   this.arr1 = res.data;
    //   // this.data = arrayToTree(res.data.depts, {
    //   //   parentProperty: "pid",
    //   //   customID: "id",
    //   // });
    // },
    upload(res) {
      console.log(`upload`, res);
      // 将图片上传到腾讯云
      var COS = require("cos-js-sdk-v5");
      var cos = new COS({
        SecretId: "AKIDFK9i13oJXUBcmgJhqiJdhU0FFzSeaFdk",
        SecretKey: "rTosl0zh8IBn8CzVljRs2vXtymJaaJlx",
      });
      cos.putObject(
        {
          Bucket: "web691-1309210366" /* 必须  存储桶的名称 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: res.file.name,
          StorageClass: "STANDARD", // 上传模式, 标准模式
          Body: res.file, // 上传文件对象
          onProgress: function (progressData) {
            console.log(JSON.stringify(progressData), 777);
          },
        },
        (err, data) => {
          console.log(err || data, 888);
          console.log(`this`, this);
          this.imageUrl = "https://" + data.Location;
          this.$emit();
          this.$emit("uploadSuccess", this.imageUrl);
        }
      );
    },
    // beforeAvatarUpload(file) {
    //   const isPNG = file.type === "image/png";
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   if (!isPNG) {
    //     this.$message.error("上传头像图片只能是 PNG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isPNG && isLt2M;
    // },

    // 富文本事件
    onEditorBlur() {
      this.$refs.formData.validateField("question");
      // 失去焦点
    },
    answerBlur() {
      this.$refs.formData.validateField("answer");
      // 失去焦点
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    // hidden() {
    //   this.questionBox = false;
    // },
    // select() {
    //   if (this.radio === 1) {
    //     this.show = false;
    //   } else {
    //     this.show = true;
    //   }
    // },
    select(show) {
      if (this.radio === 1) {
        this.show = true;
      } else if (this.radio === 2) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
    // switch1() {
    //   if (this.label === 1) {
    //     this.show = true;
    //   } else {
    //     this.show = false;
    //   }
    // },
    onAdd() {
      // let id=this.list.length>0?this.list[this.list.length-1].
      // id+1:100
      // this.list.push([])
      this.checkboxlist.push(1);
    },
    // 获取到市
    getCityData() {
      this.citySelect.province = provinces();
    },
    // 选省获取到市
    handleProvince(e) {
      this.citySelect.cityDate = citys(e);
      this.formData.city = this.citySelect.cityDate[0];
    },
    // 获取方向
    getDirction() {
      // const res = await direction();
      // const res = direction();
      // this.directionSelect = res;
      // let res = this.direction();
      // console.log(res, 343534345);
      // this.directionSelect = res;
      // this.directionSelect = direction();
      // directionSelect().then((res) => {
      //   if ((res.code = 0)) {
      //     this.directionSelect = res.data;
      //   } else {
      //     this.$message.error(res.message);
      //   }
      // });
    },
    // 添加题库
    async submit() {
      this.$refs.formData.validate(async (valid) => {
        if (!valid) return;
        // 添加道接口
        const res = await addQuestion(this.formData);
        console.log(res, 123321);
        if (res.code == 0) return this.$message.error("添加失败！");
        this.$message.success("添加成功！");
        this.formData = {
          subject: "", //学科
          directory: "", //目录
          business: "", //企业
          province: "",
          company: "",
          city: "", //城市
          direction: "", //方向
          question: "", //题干s
          answer: "", //解析
          node: "", //备注
          pic: "",
          label: "",
          video: "",
        };
        this.$router.replace("/questions/list");
      });
    },
    // close(){
    //    this.formData = {
    //     subject: "", //学科
    //     directory: "", //目录
    //     business: "", //企业
    //     province: "",
    //     company: "",
    //     city: "", //城市
    //     direction: "", //方向
    //     question: "", //题干s
    //     answer: "", //解析
    //     node: "", //备注
    //     pic: "",
    //     label: "",
    //     video: "",
    //   };
    // }

    // watch: {
    //   staffPhoto: {
    //     handler(newVal) {
    //       console.log(`newVal`, newVal);
    //       this.imageUrl = newVal;
    //     },
    //   },
    // },
  },
};
</script>

<style scoped lang='scss'>
.questions-new-container {
  padding: 30px;
}
.title {
  font-size: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
#text {
  border: 1px solid #ccc;
}
.btnColor {
  // background-color: #fab6b6;
  // border: none;
  // font-size:10;
  // opacity:1;
  // display:block;
  // margin: 0px 75px;
  margin: 65px 30px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  /* position: absolute; */
  transform: translate(350px, -45px);
  width: 100px;
  height: 50px;
  line-height: 50px;
  /* overflow: hidden; */
}
/* .avatar {
  width: 10%;
  height: 50px;
  display: inline-block;
} */
.el-icon {
  /* left: 500px; */
  font-size: 14px;
}
/* input[type='radio']:disabled{
  opacity:1;
  background:red;
  color:black
} */
.uploader-icon {
  position: absolute;
  right: -8px;
  top: -8px;
  font-size: 18px;
  color: #999;
}
</style>
<style>
.ql-editor {
  height: 250px;
}
.avatar {
  width: 73px;
  height: 36px;
  display: block;
}
</style>
